<template>
  <div class="about">
    <!-- 个人简历区域 -->
    <div class="resume-section">
      <div class="resume-header">
        <h1>个人简历</h1>
        <p class="resume-subtitle">欢迎查看我的详细简历</p>
      </div>
      <div class="resume-content">
        <!-- 简历基本信息 -->
        <div class="resume-basic-info">
          <div class="resume-avatar">
            <img src="https://image0.lietou-static.com/img/5f8fa3a6f6d1ab58476f322808u.png" alt="头像" class="avatar-img">
          </div>
          <div class="resume-details">
            <h2 class="resume-name">李进德</h2>
            <p class="resume-title">资深架构师</p>
            <p class="resume-company">横琴人寿保险有限公司</p>
            <div class="resume-tags">
              <span class="tag">Spring Cloud</span>
              <span class="tag">微服务架构</span>
              <span class="tag">分布式系统</span>
              <span class="tag">Java</span>
            </div>
          </div>
        </div>

        <!-- 工作经历 -->
        <div class="resume-section-content">
          <h3 class="section-title">工作经历</h3>
          <div class="work-experience">
            <div class="work-item">
              <div class="work-header">
                <h4 class="work-company">横琴人寿保险有限公司</h4>
                <span class="work-date">2022/12 - 至今</span>
              </div>
              <p class="work-position">资深架构师</p>
              <ul class="work-description">
                <li><i class="fa fa-angle-right"></i> 设计并实施基于Spring Cloud和Nacos的高效微服务架构</li>
                <li><i class="fa fa-angle-right"></i> 负责系统架构设计、技术选型和团队技术指导</li>
                <li><i class="fa fa-angle-right"></i> 优化系统性能，提升系统稳定性和可扩展性</li>
              </ul>
            </div>
            
            <div class="work-item">
              <div class="work-header">
                <h4 class="work-company">中邮人寿</h4>
                <span class="work-date">2022/02 - 2022/04</span>
              </div>
              <p class="work-position">技术经理</p>
              <ul class="work-description">
                <li><i class="fa fa-angle-right"></i> 负责特性部署、自动化、集成以及本地服务器架构</li>
                <li><i class="fa fa-angle-right"></i> 参与系统架构设计和开发流程优化</li>
                <li><i class="fa fa-angle-right"></i> 主要使用技术：Spring Cloud、Jenkins、Vue</li>
              </ul>
            </div>

            <div class="work-item">
              <div class="work-header">
                <h4 class="work-company">横琴人寿保险有限公司</h4>
                <span class="work-date">2018/04 - 2022/02</span>
              </div>
              <p class="work-position">资深架构师 · 信息技术中心</p>
              <ul class="work-description">
                <li><i class="fa fa-angle-right"></i> 负责分布式系统架构设计和实施</li>
                <li><i class="fa fa-angle-right"></i> 学习应用容器和Kubernetes技术</li>
                <li><i class="fa fa-angle-right"></i> 主要技术：Spring Cloud、Nacos、Redis、RDS、MongoDB、Vue、Webpack</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 项目经验 -->
        <div class="resume-section-content">
          <h3 class="section-title">项目经验</h3>
          <div class="project-experience">
            <div class="project-item">
              <div class="project-header">
                <h4 class="project-name">中台系统研究与建设</h4>
                <span class="project-date">2019/10 - 2022/02</span>
              </div>
              <p class="project-company">横琴人寿保险有限公司 · 架构师</p>
              <ul class="project-description">
                <li><i class="fa fa-angle-right"></i> 负责中台系统架构设计和技术选型</li>
                <li><i class="fa fa-angle-right"></i> 建设好商务智能中台、客户中心、用户中心、支付中心等基础服务功能</li>
                <li><i class="fa fa-angle-right"></i> 持续迭代优化系统架构和性能</li>
              </ul>
            </div>

            <div class="project-item">
              <div class="project-header">
                <h4 class="project-name">新一代分布式云核心系统</h4>
                <span class="project-date">2018/05 - 2019/10</span>
              </div>
              <p class="project-company">横琴人寿保险有限公司 · 架构师</p>
              <ul class="project-description">
                <li><i class="fa fa-angle-right"></i> 保险行业第一家完成核心系统云化，分布式架构的项目</li>
                <li><i class="fa fa-angle-right"></i> 目前已经顺利上线，获得行业认可</li>
                <li><i class="fa fa-angle-right"></i> 参考链接：https://www.sohu.com/a/414640668_100278905</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 技能专长 -->
        <div class="resume-section-content">
          <h3 class="section-title">技能专长</h3>
          <div class="skills">
            <div class="skill-category">
              <h4>后端技术</h4>
              <div class="skill-tags">
                <span class="skill-tag">Java</span>
                <span class="skill-tag">Spring Boot</span>
                <span class="skill-tag">Spring Cloud</span>
                <span class="skill-tag">微服务架构</span>
                <span class="skill-tag">分布式系统</span>
              </div>
            </div>
            <div class="skill-category">
              <h4>前端技术</h4>
              <div class="skill-tags">
                <span class="skill-tag">Vue.js</span>
                <span class="skill-tag">JavaScript</span>
                <span class="skill-tag">ES6</span>
                <span class="skill-tag">Webpack</span>
                <span class="skill-tag">Node.js</span>
              </div>
            </div>
            <div class="skill-category">
              <h4>数据库与中间件</h4>
              <div class="skill-tags">
                <span class="skill-tag">MySQL</span>
                <span class="skill-tag">Redis</span>
                <span class="skill-tag">MongoDB</span>
                <span class="skill-tag">Nacos</span>
                <span class="skill-tag">Elasticsearch</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 简历操作 -->
        <div class="resume-preview">
          <div class="resume-actions">
            <button 
              @click="printResume" 
              class="btn-print">
              <i class="fas fa-print"></i>
              打印简历
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="about-content">
      <h1>关于这个应用</h1>
      <p class="description">
        这是一个展示如何将 Vue 3 + Vite 前端与 Spring Boot 后端集成的示例项目。
        采用前后端不分离的架构，前端构建后直接集成到 Spring Boot 的静态资源目录中。
      </p>
      
      <div class="tech-features-section">
        <div class="tech-stack">
          <h2>技术栈</h2>
          <div class="tech-content">
            <div class="tech-category">
              <span class="category-label">后端：</span>
              <span class="tech-items">Spring Boot 5.3.19, Spring Web MVC, Jetty 服务器, Jackson JSON 处理</span>
            </div>
            <div class="tech-category">
              <span class="category-label">前端：</span>
              <span class="tech-items">Vue 3, Vue Router 4, Vite 构建工具, Axios HTTP 客户端</span>
            </div>
          </div>
        </div>
        
        <div class="features-list">
          <h2>主要特性</h2>
          <div class="features-content">
            <div class="feature-category">
              <span class="category-label">技术：</span>
              <span class="feature-items">前后端不分离架构, 热重载开发体验, 单页应用路由, RESTful API 集成</span>
            </div>
            <div class="feature-category">
              <span class="category-label">设计：</span>
              <span class="feature-items">现代化 UI 设计, 响应式布局, 毛玻璃效果, 彩虹渐变</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {}
  },
  methods: {
    
    // 打印简历
    printResume() {
      try {
        // 创建一个新的窗口用于打印
        const printWindow = window.open('', '_blank', 'width=800,height=600')
        
        // 获取简历内容
        const resumeContent = document.querySelector('.resume-section').innerHTML
        
        // 构建打印页面的HTML
        const printHTML = `
          <!DOCTYPE html>
          <html>
          <head>
            <title>李进德 - 个人简历</title>
            <meta charset="utf-8">
            <style>
              body {
                font-family: 'Microsoft YaHei', Arial, sans-serif;
                line-height: 1.6;
                color: #333;
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
                background: white;
              }
              .resume-section {
                background: white;
                border-radius: 8px;
                box-shadow: none;
                border: 1px solid #ddd;
                overflow: visible;
              }
              .resume-header {
                background: linear-gradient(135deg, #4a90e2 0%, #7b68ee 100%);
                color: white;
                padding: 20px;
                text-align: center;
                border-radius: 8px 8px 0 0;
              }
              .resume-header h1 {
                margin: 0 0 10px 0;
                font-size: 24px;
                font-weight: bold;
              }
              .resume-subtitle {
                margin: 0;
                font-size: 14px;
                opacity: 0.9;
              }
              .resume-basic-info {
                display: flex;
                align-items: center;
                gap: 20px;
                padding: 20px;
                background: #f8f9fa;
                border-bottom: 1px solid #ddd;
              }
              .avatar-img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                border: 2px solid #4a90e2;
              }
              .resume-name {
                color: #4a90e2;
                font-size: 20px;
                font-weight: bold;
                margin: 0 0 5px 0;
              }
              .resume-title {
                color: #4a90e2;
                font-size: 16px;
                font-weight: 600;
                margin: 0 0 5px 0;
              }
              .resume-company {
                color: #666;
                font-size: 14px;
                margin: 0 0 10px 0;
              }
              .resume-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
              }
              .tag {
                background: #4a90e2;
                color: white;
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 12px;
              }
              .resume-section-content {
                padding: 20px;
                border-bottom: 1px solid #ddd;
              }
              .section-title {
                color: #4a90e2;
                font-size: 18px;
                font-weight: 600;
                margin: 0 0 15px 0;
                border-bottom: 2px solid #4a90e2;
                padding-bottom: 5px;
              }
              .work-item, .project-item {
                background: #f8f9fa;
                padding: 15px;
                border-radius: 6px;
                margin-bottom: 15px;
                border-left: 4px solid #4a90e2;
              }
              .work-header, .project-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 8px;
              }
              .work-company, .project-name {
                color: #4a90e2;
                font-size: 16px;
                font-weight: 600;
                margin: 0;
              }
              .work-date, .project-date {
                color: #666;
                font-size: 12px;
                background: white;
                padding: 4px 8px;
                border-radius: 4px;
                border: 1px solid #ddd;
              }
              .work-position, .project-company {
                color: #333;
                font-size: 14px;
                font-weight: 500;
                margin: 0 0 10px 0;
              }
              .work-description, .project-description {
                list-style: none;
                padding: 0;
                margin: 0;
              }
              .work-description li, .project-description li {
                padding: 3px 0;
                color: #333;
                position: relative;
                padding-left: 20px;
                font-size: 14px;
              }
              .skills {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 15px;
              }
              .skill-category {
                background: #f8f9fa;
                padding: 15px;
                border-radius: 6px;
                border-left: 4px solid #7b68ee;
              }
              .skill-category h4 {
                color: #7b68ee;
                font-size: 14px;
                font-weight: 600;
                margin: 0 0 10px 0;
              }
              .skill-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
              }
              .skill-tag {
                background: #7b68ee;
                color: white;
                padding: 3px 6px;
                border-radius: 4px;
                font-size: 11px;
              }
              .resume-preview {
                display: none;
              }
              @media print {
                body { margin: 0; padding: 10px; }
                .resume-section { box-shadow: none; border: none; }
              }
            </style>
          </head>
          <body>
            <div class="resume-section">
              ${resumeContent}
            </div>
          </body>
          </html>
        `
        
        // 写入内容并打印
        printWindow.document.write(printHTML)
        printWindow.document.close()
        
        // 等待内容加载完成后打印
        printWindow.onload = function() {
          printWindow.focus()
          printWindow.print()
          printWindow.close()
        }
        
        this.$message?.success('正在准备打印...')
      } catch (error) {
        console.error('打印简历失败:', error)
        this.$message?.error('打印失败，请稍后重试')
      }
    }
  }
}
</script>

<style scoped>
.about {
  max-width: 1000px;
  margin: 0 auto;
  min-height: 100vh;
  padding: var(--spacing-xl);
}

/* 个人简历区域样式 */
.resume-section {
  margin-bottom: var(--spacing-xl);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  position: relative;
}

.resume-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  pointer-events: none;
  z-index: 0;
}

/* 简历基本信息样式 */
.resume-basic-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.resume-avatar {
  flex-shrink: 0;
}

.avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--color-primary);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

.avatar-img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-glow-primary);
}

.resume-details {
  flex: 1;
}

.resume-name {
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 2rem;
  font-weight: 700;
  text-shadow: none;
}

.resume-title {
  color: #97dc99;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 var(--spacing-xs) 0;
}

.resume-company {
  color: #e0e0e0;
  font-size: 1rem;
  margin: 0 0 var(--spacing-md) 0;
}

.resume-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.tag {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(151, 220, 153, 0.2);
  color: #97dc99;
  border: 1px solid rgba(151, 220, 153, 0.3);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all var(--transition-fast);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tag:hover {
  background: rgba(151, 220, 153, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* 简历内容区域样式 */
.resume-section-content {
  padding: var(--spacing-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.resume-section-content:last-child {
  border-bottom: none;
}

.section-title {
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 var(--spacing-lg) 0;
  position: relative;
  padding-bottom: var(--spacing-sm);
  text-shadow: none;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: #97dc99;
  border-radius: var(--radius-sm);
}

/* 工作经历样式 */
.work-experience {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.work-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border-left: 4px solid #97dc99;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.work-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  border-left-width: 6px;
  border-left-color: #0056b3;
}

.work-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.work-company {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.work-date {
  color: #e0e0e0;
  font-size: 0.9rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.work-position {
  color: #97dc99;
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 var(--spacing-md) 0;
  position: relative;
  z-index: 1;
}

.work-description {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.work-description li {
  padding: var(--spacing-xs) 0;
  color: #e0e0e0;
  position: relative;
  transition: all var(--transition-fast);
  font-weight: 500;
}

.work-description li:hover {
  color: #ffffff;
  transform: translateX(3px);
}

.work-description li i {
  margin-right: 0.5rem;
  color: #97dc99;
  transition: transform var(--transition-fast);
}

.work-description li:hover i {
  color: #ffffff;
}

/* 项目经验样式 */
.project-experience {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.project-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border-left: 4px solid #97dc99;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.project-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  border-left-width: 6px;
  border-left-color: #1e7e34;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.project-name {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.project-date {
  color: #e0e0e0;
  font-size: 0.9rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.project-company {
  color: #e0e0e0;
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0 0 var(--spacing-md) 0;
  position: relative;
  z-index: 1;
}

.project-description {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.project-description li {
  padding: var(--spacing-xs) 0;
  color: #e0e0e0;
  position: relative;
  transition: all var(--transition-fast);
  font-weight: 500;
}

.project-description li:hover {
  color: #ffffff;
  transform: translateX(3px);
}

.project-description li i {
  margin-right: 0.5rem;
  color: #97dc99;
  transition: transform var(--transition-fast);
}

.project-description li:hover i {
  color: #ffffff;
}

/* 技能专长样式 */
.skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.skill-category {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border-left: 4px solid #97dc99;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.skill-category:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  border-left-width: 6px;
  border-left-color: #5a32a3;
}

.skill-category h4 {
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 var(--spacing-md) 0;
  position: relative;
  z-index: 1;
  text-shadow: none;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  position: relative;
  z-index: 1;
}

.skill-tag {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(151, 220, 153, 0.2);
  color: #97dc99;
  border: 1px solid rgba(151, 220, 153, 0.3);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all var(--transition-fast);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.skill-tag:hover {
  background: rgba(151, 220, 153, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.resume-header {
  background: rgba(26, 26, 46, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: var(--spacing-xl);
  text-align: center;
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(92, 225, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.resume-header:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(92, 225, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.resume-header:hover::before {
  opacity: 1;
  filter: blur(6px);
}

.resume-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-rainbow);
  filter: blur(8px);
  opacity: 0.8;
  animation: pulse-glow 3s ease-in-out infinite;
}

.resume-header::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(92, 225, 255, 0.05) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
  pointer-events: none;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.resume-header h1 {
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 2.5rem;
  font-weight: 700;
  text-shadow: none;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(92, 225, 255, 0.3));
}

.resume-subtitle {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.9;
  font-weight: 400;
  color: var(--text-secondary);
  position: relative;
  z-index: 2;
  letter-spacing: 0.5px;
}

.resume-content {
  padding: var(--spacing-lg);
}

.resume-preview {
  position: relative;
}

.pdf-container {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 2px solid var(--border-primary);
  background: white;
  transition: all var(--transition-normal);
}

.pdf-container:hover {
  box-shadow: var(--shadow-glow-rainbow);
  transform: translateY(-2px);
}

.pdf-iframe {
  display: block;
  border: none;
  border-radius: var(--radius-md);
}

.resume-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

.btn-print {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  background: var(--gradient-rainbow);
  color: #000000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-print:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-print::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--transition-normal);
}

.btn-print:hover::before {
  left: 100%;
}

.btn-print i {
  font-size: 1.1rem;
}


/* 响应式设计 */
@media (max-width: 768px) {
  .resume-header h1 {
    font-size: 2rem;
  }
  
  .resume-subtitle {
    font-size: 1rem;
  }
  
  .pdf-iframe {
    height: 400px;
  }
  
  .resume-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-print {
    width: 100%;
    max-width: 200px;
    justify-content: center;
  }

  /* 简历基本信息响应式 */
  .resume-basic-info {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
  }

  .resume-name {
    font-size: 1.8rem;
  }

  .resume-title {
    font-size: 1.1rem;
  }

  .resume-company {
    font-size: 0.95rem;
  }

  .resume-tags {
    justify-content: center;
  }

  /* 工作经历响应式 */
  .work-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .work-date {
    align-self: flex-end;
  }

  /* 项目经验响应式 */
  .project-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .project-date {
    align-self: flex-end;
  }

  /* 技能专长响应式 */
  .skills {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .skill-category {
    padding: var(--spacing-md);
  }

  .skill-tags {
    justify-content: center;
  }

  /* 技术栈和特性响应式 */
  .tech-features-section {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .tech-category {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .feature-category {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .category-label {
    min-width: auto;
    margin-right: 0;
  }

  .feature-items {
    font-size: 0.9rem;
    line-height: 1.6;
  }
}

.about-content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.about-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(100, 181, 246, 0.05) 0%, rgba(100, 181, 246, 0.02) 100%);
  pointer-events: none;
  z-index: 0;
}

.about-content h1 {
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--spacing-md);
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  position: relative;
  z-index: 1;
  text-shadow: none;
}


.description {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #e0e0e0;
  margin-bottom: var(--spacing-xl);
  text-align: center;
  position: relative;
  z-index: 1;
  font-weight: 500;
  padding: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.tech-features-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  position: relative;
  z-index: 1;
  align-items: start;
}

.tech-stack {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.features-list {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tech-stack h2 {
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--spacing-lg);
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  position: relative;
  padding-bottom: var(--spacing-sm);
  text-shadow: none;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.tech-stack h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: #97dc99;
  border-radius: var(--radius-sm);
}

.tech-content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border-left: 5px solid #97dc99;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tech-category {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.tech-category:last-child {
  margin-bottom: 0;
}

.category-label {
  color: #97dc99;
  font-weight: 600;
  font-size: 1rem;
  min-width: 60px;
  margin-right: var(--spacing-sm);
  flex-shrink: 0;
}

.tech-items {
  color: #e0e0e0;
  font-size: 0.95rem;
  flex: 1;
}

.features-list h2 {
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--spacing-lg);
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  position: relative;
  padding-bottom: var(--spacing-sm);
  text-shadow: none;
}

@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

.features-list h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: #97dc99;
  border-radius: var(--radius-sm);
}

.features-content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border-left: 5px solid #97dc99;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.feature-category {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.feature-category:last-child {
  margin-bottom: 0;
}

.feature-items {
  color: #e0e0e0;
  font-size: 0.95rem;
  flex: 1;
}
</style>
